<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../pengxuan.js"></script>
<style>
*{margin:0;padding:0; font-size:12px;}
.out{width:300px; height:200px;border:1px solid #ccc;overflow:hidden;}
.title{width:100%;height:30px;background:#eee;}
.title a{ display:block; float:left;width:74px;border-left:1px solid #ccc; text-decoration:none;color:green;line-height:30px; text-align:center;}
.title a.select{background:green;color:#fff;}
.con{width:100%; height:170px; text-align:center;}

</style>
<script>
window.onload=function(){
	var out=getClass("out")[0];
	var links=out.getElementsByTagName("a");
	var con=getClass('con',out)
	//第一种方法
//	for(var i=0;i<links.length;i++){
//		links[i].index=i;
//		links[i].onmouseover=function(){
//			for(var j=0;j<links.length;j++){
//				links[j].className='';	
//				con[j].style.display='none';
//			};	
//			con[this.index].style.display='block';
//			this.className='select';
//		};	
//	};	
	//第二种方法：闭包
	for(var i=0;i<links.length;i++){
		(function(i){
			links[i].onclick=function(){
				for(var j=0;j<links.length;j++){
					links[j].className='';
					con[j].style.display='none';
				}
				con[i].style.display='block';
				this.className='select';
			};	
		})(i)
	};
};
</script>
</head>

<body>
<dl class="out">
	<dt class="title">
    	<a class="select" href="#">选项卡1</a>
    	<a href="#">选项卡2</a>
    	<a href="#">选项卡3</a>
    	<a href="#">选项卡4</a>
    </dt>
    <dd class="con">
    	1
    </dd>
    <dd class="con">
    	2
    </dd>
    <dd class="con">
    	3
    </dd>
    <dd class="con">
    	4
    </dd>
</dl>
</body>
</html>
